<template>
	<div class="inquiry-records">
		<div class="errorPage"  v-if="records.length<=0 && showRecords">
			<div class="errorPage-inner">
				<img src="../assets/img/error.png" alt="img" />
			</div>
			<p class="error-text">暂无问诊记录哦！</p>
		</div>		
		<scroller lock-x  height="16.3rem" @on-scroll="onScroll" ref="scrollerEvent" v-else>			
			<div class="inquiry-records-inner">
				<div class="clearfix inquiry-records-item" v-for="(item,index) in records" @click="toResultDetailPage(item.id)">
					<div class="left records-time">
						<p>{{item.time.day}}</p>
						<p class="time-month">{{item.time.month}}月</p>
					</div>
					<div class="right records-details">
						<div class="records-info clearfix">
							<span class="left">{{item.nickname}}</span>
							<p class="right" style="color:rgb(38,52,69,.5);font-size:.3rem;margin-top:.18rem;">
								<span class="right">{{item.gender}}</span>
								<span class="right">|</span>
								<span class="right">{{item.age}}岁</span>
							</p>
							
						</div>
						<div class="clearfix records-point">
							<p class="left records-point-img">
								<img src="../assets/img/point1.svg" alt="img" />
							</p>
							<p class="left records-point-color records-point-text">
								<span>{{item.describe}}</span>
							</p>
						</div>
						<div class="clearfix records-point">
							<p class="left records-point-img">
								<img src="../assets/img/point2.svg" alt="img" />
							</p>
							<p class="left records-point-text">
								<span>{{item.diagnose}}</span>
							</p>
						</div>
						<div class="clearfix records-point">
							<p class="left records-point-img">
								<img src="../assets/img/point3.svg" alt="img" />
							</p>
							<p class="left records-point-text">
								<span>{{item.department}}</span>
							</p>
						</div>
					</div>
				</div>
				
			</div>
		</scroller>		
	</div>
</template>

<script>
	import { Scroller} from 'vux'
	import {urlRecordList} from '../api/api'
	
	export default {		
    		name: 'records', 
	    data(){
	    		return {
	    			relHeight:'',
	    			records: [],
	    			showRecords:false
	    		}
	    },
	    components: {
		   Scroller
		},
		mounted(){
	    		//获取页面高度
	    		this.relHeight=`${document.documentElement.scrollHeight}px`;
	    		this.getRecordListFn()
	   },
	    methods:{
	    		onScroll (pos) {
		      this.scrollTop = pos.top
		    },
		    //记录请求
		    getRecordListFn(){
		    		let sendData={
		    			size: 15, 
		    			start: 0
		    		};
		    		urlRecordList(sendData).then(response => {
					if(response.data.records){
						this.records=response.data.records;
						if(this.records.length<0){
							this.showRecordsFn();
						}
					}
				}).catch(error => {
	           	    console.log(34)
	          	});
		    },
		    toResultDetailPage(id){
		    		this.$router.push({name:'result',params:{id:id,path:1}});
		    },
		    showRecordsFn(){
		    		let _this=this;
		    		setTimeout(function(){
		    			_this.showRecords=true;
		    		},500)
		    		
		    },
	    },
	}
</script>

<style>
	@import url("../assets/css/records.css");
</style>